<template>
	<view class="my-nav-bar">
		<view :style="{color:color}" class="content">
			
			<!-- 左边图标或者文字 -->
			<view class="leftblock" @tap="tapleft" :class="{'betweenflex':title.length}">
				<view class="back" v-if="leftIcon.length" @tap="back">
					&#xe605;
				</view>
				<view class="leftText" v-if="leftText.length">
					{{leftText}}
					<img class="dropdown-w" src="../static/icon/cardropdown-w.png" />
				</view>
			</view>
			
			<!--标题-->
			<view class="my-tittle" v-if="title.length">
				{{title}}
			</view>
			
			<!-- 搜索框 -->
			<view class="searchblock" @tap="tapsearch" v-if="search=='1'&&!title.length">
				<img class="searchicon" src="../static/icon/searchicon.png" />
				<input class="my-input" disabled :placeholder='placeholder' />
			</view>
			<view class="searchblock" v-if="search=='2'&&!title.length">
				<img class="searchicon" src="../static/icon/searchicon.png" />
				<input class="my-input" type="text"  focus :placeholder='placeholder' />
			</view>
			
			<!-- 右边图标或者文字 -->
			<view class="rightblock" @tap="tapright" :class="{'betweenflex':title.length}">
				<view class="rightIcon" v-if="rightIcon.length">
					<img style="width: 48upx;height: 48upx;padding-left: 30upx;" src="../static/icon/news.png" />
				</view>
				<view class="rightText" v-if="rightText.length&&!rightIcon.length">
					{{rightText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon.vue'
	export default {
		name: 'MyNavBar',
		components: {
			uniIcon
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			leftIcon: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: ''
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#333333'
			},
			backgroundColor: {
				type: String,
				default: '#FFFFFF'
			},
			option: {
				type: String,
				default: ''
			},
			search:{
				type:String,
				default:''
			},
			placeholder:{
				type:String,
				default:''
			}
		},
		data() {
			return {

			};
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			tapleft() {
				this.$emit('click-left')
			},
			tapsearch(){
				this.$emit('tapsearch')
			},
			tapright() {
				this.$emit('click-right')
			}
		},
	}
</script>

<style lang="less">
	.my-nav-bar{
		width: 100%;
		height: 44px;
	}
	.content {
		position: fixed;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		padding: 16px 0 0 0; 
		height: 44px;
		background-color: #FFFFFF;
	}
	.my-tittle{
		flex: 2;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}
	.betweenflex{
		flex: 1;
	}

	.searchblock {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		height: 28px;
		align-items: center;
		background-color: #f4f5f6;
		border-radius: 4px;
		flex: 2;

		.searchicon {
			width: 24px;
			height: 24px;
			padding: 0 2px;
		}
		
		.my-input{
			width: 100%;
			font-size: 14px;
			height: 28px;
			line-height: 28px;
			
		}
	}

	
	

	.dropdown-w {
		width: 24px;
		height: 24px;
		padding: 0 10px 0 5px;
	}


	.rightblock {
		padding-right: 15px;

		.rightIcon {
			width: 24px;
			height: 24px;
			padding: 0 0 0 15px;
		}

		.rightText {
			font-size: 15px;
			color: #333333;
			padding: 0 0 0 15px;
		}
	}

	.leftblock {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding-left: 15px;

		
		.back{
			font-family: iconfont;
			font-size: 24px;
			padding: 0 10px 0 0;
		}

		.leftText {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			font-size: 15px;
			color: #333333;
			padding: 0 10px 0 0;
		}
	}
</style>
